import moment from 'moment';
import { useContext } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { PurchaseApplyStatisticsContext } from '../common';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Button, Card, Col, DatePicker, Form, Input, Row, Space } from 'antd';
const { RangePicker }: any = DatePicker;
const StatisticsManageViewTop = ({ searchForm }: Record<string, any>) => {
  /**
   * 解构上下文
   * */
  const { styleFixCls, changeStepType } = useContext(PurchaseApplyStatisticsContext);

  /**
   * 判断当前步长
   * */
  const isSearchStep = () => {
    const [createTimeStart, createTimeEnd] = searchForm?.getFieldValue('timeRanges');
    const oneYearRang = moment?.duration(createTimeEnd.diff(createTimeStart));
    if (oneYearRang?.asYears() > 1) {
      changeStepType('年');
    } else {
      changeStepType('月');
    }
  };

  return (
    <div className={styleFixCls + 'TopSearchBox'}>
      <Card title={'统计条件'}>
        <div style={{ padding: '0px' }} className={pageStyles['fromView-styles']}>
          <Form form={searchForm}>
            <Row>
              <Col span={10}>
                <Form.Item name="timeRanges" initialValue={[moment().startOf('year'), moment().endOf('year')]}>
                  <RangePicker
                    style={{ width: '100%' }}
                    format="YYYY-MM-DD"
                    placeholder={['开始日期', '结束日期']}
                    ranges={{
                      本年: [moment().startOf('year'), moment().endOf('year')],
                      近三年: [moment().subtract(3, 'years').startOf('year'), moment().endOf('year')],
                      近五年: [moment().subtract(5, 'years').startOf('year'), moment().endOf('year')],
                    }}
                    onChange={isSearchStep}
                    allowClear={false}
                  />
                </Form.Item>
              </Col>
              <Col span={14} className={styleFixCls + 'TopSearchBox-colRightBox'}>
                <Space>
                  <Button type="primary" icon={<SearchOutlined />}>
                    查询
                  </Button>
                  <Button icon={<ReloadOutlined />}>重置</Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
      </Card>
    </div>
  );
};

export { StatisticsManageViewTop };
